<template>
    <div class="printBatchCodeBox">
        <ul class="printBatchCodeList">
            <li class="printBatchCodeItem" v-for="(item,index) in printTemplateArrData" :key="index">
                <div class="PrintBox" :style="{width:item.hasOwnProperty('companyName')?'283px':'283px'}">
                    <div :class="[item.hasOwnProperty('companyName')?'logoTemplate':'commonTemplate']">
                        <div class="print_img">
                            <img class="print_QRcode" :src="item.url" alt="">
                        </div>
                        <div class="commonTemplateContent">
                            <div class="topNullBox"><img :src="topNullBoxImgurl" alt=""></div>
                            <div class="companyImg" v-if="item.hasOwnProperty('companyName')">
                                <img class="companyLogo" :src="item.src" alt="">
                                <div v-if="1>2">
                                    <canvas width="125" height="15" ref="canvasCompanyText"></canvas>
                                    <!-- <span class="companyText">{{item.companyName}}</span> -->
                                </div>
                            </div>
                            <div class="assetsName" v-if="item.hasOwnProperty('name')">
                                <img ref="assetsNameImage" class="assetsNameImage" src="" alt="" >
                                <canvas class="canvasNameText" width="125" ref="canvasNameText"></canvas>
                                <!-- <span>{{item.name}}</span> -->
                            </div>
                            <div class="assetsId">
                                <img ref="assetsIdImage" class="assetsIdImage" src="" alt="">
                                <canvas class="canvasIdText" width="125" height="22" ref="canvasIdText"></canvas>
                                <!-- <span>{{item.id}}</span> -->
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
/* eslint-disable */ 
export default {
  name: 'printBatchCode',
  props: {
      printTemplateArrData:Array,/**打印模板 */
  },
  data(){
    return {
        topNullBoxImgurl:require('@/assets/images/seize a seat.png'),
    }
  },
  created(){
        // log(this.printTemplateArrData)
  },
  mounted(){
    
  },
  updated(){
      this.$nextTick(()=>{
          if(this.printTemplateArrData.length){
            /**canvas文字自动换行扩展方法 */
            CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
                if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
                    return;
                }
                
                var context = this;
                var canvas = context.canvas;
                
                if (typeof maxWidth == 'undefined') {
                    maxWidth = (canvas && canvas.width) || 300;
                }
                if (typeof lineHeight == 'undefined') {
                    lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
                }
                
                // 字符分隔为数组
                var arrText = text.split('');
                var line = '';
                
                for (var n = 0; n < arrText.length; n++) {
                    var testLine = line + arrText[n];
                    var metrics = context.measureText(testLine);
                    var testWidth = metrics.width;
                    if (testWidth > maxWidth && n > 0) {
                        context.fillText(line, x, y);
                        line = arrText[n];
                        y += lineHeight;
                    } else {
                        line = testLine;
                    }
                }
                context.fillText(line, x, y);
            };

            /**canvas绘制文字（跟据传进来的数据） */
            this.printTemplateArrData.map((item,index)=>{
                    //资产id
                    let canvasId = this.$refs.canvasIdText[index].getContext('2d');
                    canvasId.font = "normal normal bold 20px SourceHanSansCN-Regular";
                    canvasId.fillText(this.printTemplateArrData[index].id,0,20);
                    this.$refs.assetsIdImage[index].src = this.$refs.canvasIdText[index].toDataURL("image/png"); 
                    
                    //资产名称
                    if(item.hasOwnProperty('name')){
                        this.$refs.canvasNameText[index].height = Math.ceil(this.printTemplateArrData[index].name.length/6)*22; 
                        this.$refs.canvasNameText[index].height>88?this.$refs.canvasNameText[index].height=88:'';
                        let canvasName = this.$refs.canvasNameText[index].getContext('2d');
                        canvasName.font = "normal normal bold 20px SourceHanSansCN-Regular";
                        // canvasName.fillText(this.printTemplateArrData[index].name,0,17);  
                        canvasName.wrapText(this.printTemplateArrData[index].name,0,17,125,22);  
                        this.$refs.assetsNameImage[index].src = this.$refs.canvasNameText[index].toDataURL("image/png");
                    }

                    //公司名称
                    // if(item.hasOwnProperty('companyName')){
                    //     let canvasCompany = this.$refs.canvasCompanyText[index].getContext('2d');
                    //     canvasCompany.font = "12px SourceHanSansCN-Regular"
                    //     canvasCompany.fillText(this.printTemplateArrData[index].companyName,0,12)
                    // } 
            })
            this.$emit('updatedFn',this.$el)
        }
      })
  },
  watch:{
    
  },
  methods:{
      
  }
}
</script>

<style lang="stylus" scoped>
.printBatchCodeBox
    padding 0
    canvas
        display none
    .printBatchCodeList
        .printBatchCodeItem
            .PrintBox
                width 283px
                height 156px
                overflow hidden
                .commonTemplate,.logoTemplate
                    width 283px
                    .print_img
                        width 140px
                        height 140px
                        padding-left 10px
                        float left
                        .print_QRcode
                            width 100%
                            height 100%
                    .commonTemplateContent
                        width 277px
                        padding 0 0 0 152px 
                        height 140px
                        box-sizing border-box
                        position relative
                        .topNullBox
                            height 11px
                            overflow hidden
                            img 
                                width 100%
                                height 100%
                        .assetsName
                            max-height 88px
                            overflow hidden
                        .assetsId
                            height auto
                            position absolute
                            bottom 8px
                .logoTemplate
                    width 283px
                    .print_img
                        width 140px
                        height 140px
                        padding-left 10px
                        float left
                        .print_QRcode
                            width 100%
                            height 100%
                    .commonTemplateContent
                        width 277px
                        padding 0 0 0 152px
                        height 140px
                        box-sizing border-box
                        .topNullBox
                            height 9px
                            overflow hidden
                        .companyImg
                            .companyLogo
                                width 100px
                                height 100px
                            .companyText
                                font-size 12px
                        .assetsName
                            max-height 61px
                            overflow hidden
                            &>span 
                                font-size 12px
                        .assetsId
                            font-size 12px
                            &>span 
                                font-size 12px
@page 
    size auto 
    margin 0mm 
</style>






